<template>
  <div class="pay-contail">
    <van-nav-bar class="header van-nav-bar_none van-nav-bar_line"
                 title="支付页面"
                 left-arrow
                 @click-left="goBack()" />
    <div class="weaper">
      <div class="fengniao-content money">
        <p>
          <span>¥</span>{{obj.money}}
        </p>
      </div>
      <van-cell-group class="fengniao-content">
        <van-cell title="订单名称"
                  :value="obj.name" />
        <van-cell title="支付时间"
                  :value="new Date() | dateFormat" />
        <van-cell title="到期时间"
                  :value="obj.endDate | dateFormat" />
      </van-cell-group>
      <van-radio-group v-model="type"
                       class="fengniao-content">
        <van-cell-group>
          <van-cell title="支付宝"
                    clickable
                    @click="type=1">
            <van-radio :name="1" />
            <van-icon class="left-icon"
                      name="qq"
                      slot="icon"
                      :style="loadStyle('#01AAED')"></van-icon>
          </van-cell>
          <van-cell title="微信"
                    clickable
                    @click="type=2">
            <van-icon class="left-icon"
                      name="weixin"
                      slot="icon"
                      :style="loadStyle('#5FB878')"></van-icon>
            <van-radio :name="2" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-button class="pay-submit"
                :disabled="status"
                @click="pay"
                type="danger">支付</van-button>
  </div>
</template>

<script>

import { wechatSDK } from '@/cordova/';
import { getPayParams, getTotalFee } from '@/api/pay';
import baseCommon from '@/mixins/common.js';
import { validatenull } from '@/util/validate';
import { mapGetters } from 'vuex';

export default {
  name: 'pay',
  mixins: [baseCommon()],
  data() {
    return {
      type: 2,
      obj: {
        money: '',
        name: '',
      },
      form: {
        houseId: '',
        payUser: '',
        fee_type: '',
      },
    };
  },
  computed: {
    status() {
      return validatenull(this.type);
    },
    ...mapGetters(['userInfo', 'website']),
  },
  created() {
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      this.form.houseId = this.userInfo.houseId;
      this.form.payUser = this.userInfo.userId;
      this.form.fee_type = this.$route.query.type;
      this.form.appid = this.website.appId;
      getTotalFee({
        fee_type: this.form.fee_type,
        houseId: this.form.houseId,
      }).then((res) => {
        const data = res.data;
        this.obj.money = data.fee;
        this.obj.name = data.name;
        this.obj.endDate = data.endDate;
      });
    },
    pay() {
      let params;
      if (this.type === 2) {
        this.$toast('正在调用微信支付...');
        getPayParams(this.form).then((res) => {
          const data = res.data;
          const form = data;
          const timestamp = parseInt(new Date().getTime().toString() / 1000);
          params = {
            partnerid: form.mch_id, // merchant id
            prepayid: form.prepay_id, // prepay id
            noncestr: form.nonce_str, // nonce
            timestamp: form.timeStamp, // timestamp
            sign: form.sign, // signed string
          };
          return wechatSDK();
        })
          .then(res => res.pay(params)).then(() => {
            this.$message.success({
              message: '支付成功',
              duration: 1500,
            });
            setTimeout(() => {
              this.goBack();
            }, 500);
          }).catch((err) => {
            this.$toast(err);
          });
      } else if (this.type === 1) {
        this.$message.warning({
          message: '支付宝还在对接中',
          duration: 1500,
        });
      }
    },
    loadStyle(color) {
      return {
        backgroundColor: color,
      };
    },
  },
};
</script>

<style lang="scss">
.pay-contail {
  .header {
    background-color: #58c474;
    color: #fff;
    &::after {
      content: none;
    }
    i {
      color: #fff;
    }
  }
  .money {
    color: #fff;
    background-color: #58c474;
    p {
      font-size: 42px;
      line-height: 130px;
      text-align: center;

      span {
        margin-right: 5px;
        font-size: 26px;
      }
    }
  }
  .pay-submit {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    border-radius: 0;
  }
}
</style>
